import React, { PureComponent, Fragment } from 'react';
import moment from 'moment'; //time格式工厂
import { connect } from 'dva';
import style from './UpdateModal.less';
import { FormattedMessage, formatMessage } from 'umi/locale'; //此方法引入的数据可以在src/locales中配置
import {
  Input,
  DatePicker,
  Form,
  Row,
  Col,
  Card,
  Tooltip,
  Alert,
  Upload,
  message,
  Icon,
  Tree,
  TreeSelect,
  InputNumber,Select,Button , Table ,Modal,Pagination
} from 'antd';

//表单
const FormItem = Form.Item;
const { TextArea } = Input;

const { TreeNode } = TreeSelect;

//所属租户选择框
const Option = Select.Option;

@Form.create()
export default class UpdateModal extends PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    const {
      modalFlag,
      closeUpdateModal,
      updateData,

      createUser,
      updateUser,
      form: { getFieldDecorator },
      userManage,
    } = this.props;
    const { form } = this.props;
    //console.log(modalFlag)
    const onOk = e => {
      e.preventDefault();
      form.validateFields((err, values) => {
        if (err) return;

        values.birthday =values.birthday ? moment(values.birthday).format('YYYY-MM-DD') : '';

        if (modalFlag === 'create') {



          createUser(values);
        } else if (modalFlag === 'update') {
          //修改表单请求
          let payload = {
            birthday: values.birthday ? moment(values.birthday).format('YYYY-MM-DD') : '',
            user_id: updateData.user_id,
            ...values
          };
          updateUser(payload);
        }
      });
    };



    return (
      <Modal
        keyboard={true}
        visible={true}
        title={`${
          modalFlag === 'create'
            ? "新增用户"
            : "编辑用户"
        }`}
        destroyOnClose={true}
        maskClosable={false}
        width={`850px`}
        onOk={onOk}
        onCancel={closeUpdateModal}
      >
        <Form layout="inline">
          {/* 行1 */}
          <div className={style['motal-line']}>
            <div className={style['every-block']}>
              <p className={style.p1}>
                <span className={style.star}>*</span>
                用户名：
              </p>
              <Form.Item style={{ marginBottom: 0 }}>
                {getFieldDecorator('user_nick_name', {
                  rules: [
                    {
                      required: true,
                      message: '请输入用户名',
                    },
                  ],
                  initialValue: modalFlag === 'update' ? updateData.user_nick_name : undefined,
                })(<Input placeholder="请输入" className={style['input-box']} />)}
              </Form.Item>
            </div>
            <div className={style['every-block']}>
              <p className={style.p1}>
                <span className={style.star}>*</span>
                联系方式：
              </p>
              <Form.Item style={{ marginBottom: 0 }}>
                {getFieldDecorator('phone', {
                  rules: [
                    {
                      required: true,
                      message: '联系方式必须填写',
                    },
                    {
                      pattern: /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/,
                      message: '不是一个合法的手机号码',
                    },
                  ],
                  initialValue: modalFlag === 'update' ? updateData.phone : undefined,
                })(<Input placeholder="请输入" className={style['input-box']} />)}
              </Form.Item>
            </div>
          </div>
          {/* 行3 */}
          <div className={style['motal-line']}>
            <div className={style['every-block']}>
              <p className={style.p1}>
                {/*<span className={style.star}>*</span>*/}
                用户账号
              </p>
              <Form.Item style={{ marginBottom: 0 }}>
                {getFieldDecorator('user_account', {
                  /*rules: [
                    {
                      required: true,
                      message: '请输入用户账号',
                    },
                  ],*/
                  initialValue: modalFlag === 'update' ? updateData.user_account : undefined,
                })(<Input placeholder="请输入" className={style['input-box']} />)}
              </Form.Item>
            </div>
            <div className={style['every-block']}>
              <p className={style.p1}>
                <span className={style.star}>*</span>
                账号密码：
              </p>
              <Form.Item style={{ marginBottom: 0 }}>
                {getFieldDecorator('password', {
                  rules: [
                    {
                      required: true,
                      message: '账号密码',
                    },
                  ],
                  initialValue: modalFlag === 'update' ? updateData.password : undefined,
                })(<Input placeholder="请输入" className={style['input-box']} />)}
              </Form.Item>
            </div>
          </div>


          {/* 行6 */}
          <div className={style['motal-line']}>
            <div className={style['every-block']}>
              <p className={style.p1}>
                性别：
              </p>
              <Form.Item style={{ marginBottom: 0 }}>
                {getFieldDecorator('sex', {
                  initialValue: modalFlag === 'update' ? updateData.sex : undefined,
                })(
                  <Select className={style['input-box']} placeholder="请选择">
                    <Option value="1">男</Option>
                    <Option value="2">女</Option>
                  </Select>
                )}
              </Form.Item>
            </div>
            <div className={style['every-block']}>
              <p className={style.p1}>
                生日：
              </p>
              <Form.Item style={{ marginBottom: 0 }}>
                {getFieldDecorator('birthday', {
                  initialValue:
                    modalFlag === 'update' && updateData.birthday && updateData.birthday != ''
                      ? moment(updateData.birthday, 'YYYY-MM-DD')
                      : undefined,
                })(
                  <DatePicker
                    placeholder="选择生日"
                    format="YYYY-MM-DD"
                    className={style['input-box']}
                  />
                )}
              </Form.Item>
            </div>
          </div>
        </Form>
      </Modal>
    );
  }
}
